<template>
    <common-page title="重置密码">
        <el-steps :active="stepActive" simple finish-status="success">
            <el-step title="填写新密码"/>
            <el-step title="完成重置"/>
        </el-steps>
        <el-form v-if="stepActive == 0" ref="formRef" :model="form" :rules="rules" :label-width="120">
            <el-form-item label="邮箱地址" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
                <div class="el-form-item-msg">请输入注册时填写的邮箱地址</div>
            </el-form-item>
            <el-form-item label="邮箱验证码" prop="captcha">
                <div class="yzm">
                    <el-input v-model="form.captcha" placeholder="请输入邮箱验证码"></el-input>
                    <el-button @click="getCaptcha(formRef)" :disabled="disabled">发送验证码<span v-if="disabled">
                            ({{ countdown }})</span></el-button>
                </div>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input v-model="form.password" show-password placeholder="请输入新密码"></el-input>
                <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
                <fc-password-strength v-model="form.password"></fc-password-strength>
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirm">
                <el-input v-model="form.confirm" show-password placeholder="请再一次输入新密码"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="save(formRef)">提交</el-button>
            </el-form-item>
        </el-form>
        <el-result v-if="stepActive >= 1" icon="success" title="密码重置成功"
                   sub-title="请牢记自己的新密码,返回登录后使用新密码登录">
            <template #extra>
                <el-button type="primary" @click="backLogin">返回登录</el-button>
            </template>
        </el-result>
    </common-page>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue';
import {ElMessage, type FormInstance, FormRules} from 'element-plus'
import commonPage from './components/commonPage.vue'
import router from '@/router'
import {PasswordRequestModel} from "@/models/authModel.ts";
import {sendEmailCaptcha} from "@/api/modules/guest.ts";
import {passwordApi} from "@/api/modules/auth.ts";

const stepActive = ref(0);
const disabled = ref(false);
const countdown = ref(60);
const formRef = ref<FormInstance>();
const form = reactive<PasswordRequestModel>({
    email: "",
    password: "",
    confirm: "",
    captcha: "",
});

const rules = reactive<FormRules<PasswordRequestModel>>({
    email: [
        {required: true, message: '请输入邮箱地址'}
    ],
    password: [
        {required: true, message: '请输入新的密码'}
    ],
    confirm: [
        {required: true, message: '请再次输入新的密码'},
        {
            validator: (_rule, value, callback) => {
                if (value !== form.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            }
        }
    ],
    captcha: [
        {required: true, message: '请输入邮箱验证码'}
    ],
})
const getCaptcha = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validateField("email", async (valid) => {
        if (!valid) return;
        try {
            await sendEmailCaptcha({email: form.email});
            disabled.value = true;
            countdown.value = 60;
            const t = setInterval(() => {
                countdown.value -= 1;
                if (countdown.value < 1) {
                    clearInterval(t)
                    disabled.value = false;
                    countdown.value = 0;
                }
            }, 1000);
        } catch (error) {
            ElMessage.error("发送验证码失败，请重试！");
        }
    });
};

const save = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate(async (valid) => {
        if (!valid) return;
        try {
            await passwordApi(form);
            stepActive.value += 2;
        } catch (error) {
            console.error(error);
        }
    });
};

const backLogin = () => {
    router.push({
        path: '/login'
    })
}
</script>

<style scoped></style>
